<template>
    <el-container>
        <el-header height="36px" style="background-color: #EFEFEF;padding:6px 0px 0px 5px;">
            <div style="float:left">
                <el-button type="primary" size="small" style="display:inline" @click="ok">确定
                </el-button>
            </div>
        </el-header>
        <el-main>
            <el-container>
                <el-aside style="width:50%">
                    <table>
                        <tr>
                            <td style="width:80px">源数据库</td>
                            <td> <el-select v-model="data.source.connectionId" filterable @change="changeConnection(1)"
                                    style="width:200px">
                                    <el-option v-for="item in data.connections" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select></td>
                        </tr>
                        <tr>
                            <td>数据库</td>
                            <td>
                                <el-select v-model="data.source.database" filterable @change="changeDatabase(1)"
                                    style="width:200px">
                                    <el-option v-for="item in data.source.databases" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td>架构</td>
                            <td>
                                <el-select v-model="data.source.schema" filterable style="width:200px">
                                    <el-option v-for="item in data.source.schemas" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </td>
                        </tr>
                    </table>
                </el-aside>
                <el-main>
                    <table>
                        <tr>
                            <td style="width:80px">目标数据库</td>
                            <td> <el-select v-model="data.target.connectionId" filterable @change="changeConnection(2)"
                                    style="width:200px">
                                    <el-option v-for="item in data.connections" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select></td>
                        </tr>
                        <tr>
                            <td>数据库</td>
                            <td>
                                <el-select v-model="data.target.database" filterable @change="changeDatabase(2)"
                                    style="width:200px">
                                    <el-option v-for="item in data.target.databases" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td>架构</td>
                            <td>
                                <el-select v-model="data.target.schema" filterable style="width:200px">
                                    <el-option v-for="item in data.target.schemas" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </td>
                        </tr>
                    </table>
                </el-main>
            </el-container>
        </el-main>

    </el-container>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';
import { SelectOption } from "@/common/models";
import { ElMessage } from 'element-plus';

interface CompareData {
    connectionId: string,
    database: string,
    schema: string
    databases: SelectOption[],
    schemas: SelectOption[]
}

interface ViewData {
    connections: SelectOption[],
    source: CompareData,
    target: CompareData
}

const data = reactive<ViewData>({
    connections: [],
    source: {
        connectionId: "",
        database: "",
        schema: "",
        databases: [],
        schemas: []
    },
    target: {
        connectionId: "",
        database: "",
        schema: "",
        databases: [],
        schemas: []
    }
});

onMounted(() => {
    invoke("get_simple_connections").then((result: any) => {
        for (let i = 0; i < result.length; i++) {
            data.connections.push({
                value: result[i].id,
                label: result[i].name
            });
        }
    }).catch(err => {
        console.error(err);
    });
});

const changeConnection = (flag: number) => {
    let connectionId = "";
    if (flag == 1) {
        connectionId = data.source.connectionId;
        data.source.database = "";
        data.source.databases = [];
        data.source.schema = "";
        data.source.schemas = [];
    }
    else if (flag == 2) {
        connectionId = data.target.connectionId;
        data.target.database = "";
        data.target.databases = [];
        data.target.schema = "";
        data.target.schemas = [];
    }
    invoke("pgsql_get_databases", { id: connectionId }).then((result: any) => {
        for (let i = 0; i < result.length; i++) {
            if (flag == 1) {
                data.source.databases.push({
                    value: result[i].name,
                    label: result[i].name
                });
            } else if (flag == 2) {
                data.target.databases.push({
                    value: result[i].name,
                    label: result[i].name
                });
            }

        }
    }).catch(err => {
        console.error(err);
    });
}

const changeDatabase = (flag: number) => {
    let connectionId = "";
    let database = "";
    if (flag == 1) {
        connectionId = data.source.connectionId;
        database = data.source.database;
        data.source.schema = "";
        data.source.schemas = [];
    }
    else if (flag == 2) {
        connectionId = data.target.connectionId;
        database = data.target.database;
        data.target.schema = "";
        data.target.schemas = [];
    }
    invoke("pgsql_get_schemas", { id: connectionId, database: database }).then((result: any) => {
        for (let i = 0; i < result.length; i++) {
            if (flag == 1) {
                data.source.schemas.push({
                    value: result[i].name,
                    label: result[i].name
                });
            }
            else if (flag == 2) {
                data.target.schemas.push({
                    value: result[i].name,
                    label: result[i].name
                });
            }
        }
    })
}

const ok = () => {
    invoke("pgsql_schema_compare", { source: { id: data.source.connectionId, database: data.source.database, schema: data.source.schema }, target: { id: data.target.connectionId, database: data.target.database, schema: data.target.schema } }).then((result: any) => {
        ElMessage({
            message: "导出成功！",
            type: "success",
        });
    }).catch(err => {
        ElMessage({
            message: "导出失败！",
            type: "error",
        });
        console.error(err);
    });
}

</script>